<template>
  <el-container id="user-home-container">
    <el-main id="user-home-main-container">
      <div style="margin-top: 10px;" id="quick-operation">
        <div style="background-color: #F2F2F2; height: 30px; border-radius: 5px; padding-top: 8px;" id="quick-operation-title">
          <span style="font-size: 16px;font-weight: bold; padding-left: 20px;">快捷操作</span>
        </div>
        <el-card id="quick-operation-area">
          <el-row id="quick-operation-row">
            <el-col :span="6" @click="tonewTask" id="new-task-column">
              <div class="action-card">
                <i class="iconfont">&#xe697;</i>
                <div style="margin-top: 10px;">新建任务</div>
              </div>
            </el-col>
            <el-col :span="6" id="all-task-column">
              <div class="action-card" @click="toUserAllTask">
                <i class="iconfont">&#xe69e;</i>
                <div style="margin-top: 10px;">全部任务</div>
              </div>
            </el-col>
            <el-col :span="6" @click="toDoList">
              <div class="action-card">
                <i class="iconfont">&#xe69b;</i>
                <div style="margin-top: 10px;">待办任务</div>
              </div>
            </el-col>
            <el-col :span="6" @click="personal" id="personal-info-column">
              <div class="action-card">
                <i class="iconfont">&#xe600;</i>
                <div style="margin-top: 10px;">我的信息</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <div style="margin-top: 20px;">
        <div class="left">
          <div class="title title_left">数据简报</div>
          <div class="summary-chart-container" id="task-status-cards">
            <div class="task-summary">
              <div class="task-row">
                <div class="task-card task-all">
                  <div>全部任务</div>
                  <span>{{ taskData.allTASK }}</span>
                </div>
                <div class="task-card task-pending">
                  <div>待办任务</div>
                  <span>{{ taskData.toDoTask }}</span>
                </div>
              </div>
              <div class="task-row">
                <div class="task-card task-expired">
                  <div>到期任务</div>
                  <span>{{ taskData.expiredTask }}</span>
                </div>
                <div class="task-card task-delayed">
                  <div>已办任务</div>
                  <span>{{ taskData.completedTask }}</span>
                </div>
              </div>
            </div>
            <div class="task-chart">
              <div class="task-card task-completed">
                <div>未读信息</div>
                <span>{{ taskData.unreadMessage }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right" id="charts-container">
          <div class="title">任务数量统计</div>
          <el-row :gutter="20" id="task-status-pie-chart">
            <el-col :span="12">
              <div class="chart-box">
                <e-charts :option="pieOption" />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref,onMounted } from 'vue';
import { getAllWorks } from '@/api'
import {useAllTaskStore}from "@/store/userAllTask/"
import { useLoginStore } from '../../store/login';
import userMyMessage from '@/pages/userPages/userMyMessage.vue'
const router = useRouter();
const allTaskStore= useAllTaskStore();

const personal = () => {
  router.push({ path: '/userMyMessage' });
};
const tonewTask = () => {
  router.push({ path: '/newTask' });
};

const toUserAllTask = ()=>{
  router.push({ path: '/userAllTask' });
}

// 待办任务
const toDoList =()=>{
  allTaskStore.formInline.taskStatus="进行中（待办）"
  router.push({ path: '/userAllTask' ,query:{title:"待办任务"}});
}

//用于存储从接口获取的数据的响应式数据
const taskData = ref({
  allTASK: 0,
  toDoTask: 0,
  completedTask: 0,
  expiredTask: 0
});



// 饼图数据
const pieOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '任务分类',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      }
    }
  ]
});

// 在组件挂载时调用接口获取数据
onMounted( () => {

    try {
        getAllWorks({userId:useLoginStore().getUserId}).then(res=>{
            console.log(res);
            
          if (res.data.code == 200) {
            taskData.value = res.data.data;

            // 更新饼图数据
            pieOption.value.series[0].data = [
                { value: taskData.value.toDoTask, name: '待办' },
                { value: taskData.value.expiredTask, name: '到期' },
                { value: taskData.value.completedTask, name: '已办' },
            ];
        } else {
            console.error('获取任务数据失败，错误信息：', res.data.msg);
        }
        })
       
    } catch (error) {
        console.error('接口调用出错：', error);
    }
});

</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-card {
  text-align: center;
}

.iconfont {
  font-size: 50px;
  color: #5898eb;
}

.left {
  float: left;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.title_left{
  padding-left: 160px;
}
.summary-chart-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.task-summary {
  width: 65%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.task-row {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin-bottom: 10px;
  margin-left: 100px;
}

.task-card {
  width: 160px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.task-all {
  background-color: #d5d2d2;
}

.task-pending {
  background-color: #3b8dbd;
}

.task-completed {
  background: rgba(156, 107, 210, 0.8);
  width: 150px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50% 40% 60% 40% / 50% 60% 40% 50%;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 10px 20px 30px rgba(0, 0, 0, 0.2),
    10px 10px 20px rgba(0, 0, 0, 0.1),
    15px 15px 30px rgba(0, 0, 0, 0.05);
  animation: a 4s ease-in-out infinite alternate;
}

.task-completed::before {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: b 2s ease-in-out infinite alternate;
}

.task-completed::after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 60%;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  /* 更加透明的反光点 */
  border-radius: 50%;
  animation: c 3s ease-in-out infinite alternate;
}

@keyframes a {
  25% {
    border-radius: 56% 44% 62% 38% / 54% 60% 50% 50%;
  }

  50% {
    border-radius: 49% 51% 52% 48% / 50% 50% 50% 50%;
  }

  75% {
    border-radius: 64% 36% 69% 31% / 33% 64% 36% 67%;
  }

  100% {
    border-radius: 60% 40% 43% 57% / 45% 51% 49% 55%;
  }
}

@keyframes b {
  25% {
    top: 48%;
    left: 52%;
  }

  50% {
    top: 52%;
    left: 50%;
  }

  100% {
    top: 55%;
    left: 48%;
  }
}

@keyframes c {
  25% {
    top: 58%;
    left: 55%;
  }

  50% {
    top: 62%;
    left: 48%;
  }

  100% {
    top: 65%;
    left: 50%;
  }
}

.task-completed::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 80%);
  animation: flow 3s linear infinite;
}

@keyframes flow {
  0% {
    background-position: 100% 100%;
  }

  50% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 100%;
  }
}

.task-expired {
  background-color: #ff9e00;
}

.task-delayed {
  background-color: #f44336;
}

.task-chart {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 200px;
}

.right {
  float: right;
  width: 40%;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.chart-box {
  width: 100%;
  height: 300px;
}

.el-row {
  margin: 20px 0;
}

@media screen and (max-width: 768px) {
 .el-container {
    width: 100%;
  }
 .left,
 .right {
    float: none;
    width: 100%;
  }
 .el-col {
    :span {
      span: 24;
    }
  }
 .action-card {
    margin-bottom: 10px;
  }
 .iconfont {
    font-size: 3em;
  }
 .task-card {
    width: 120px;
    height: 100px;
  }
 .task-row {
    width: 100%;
    margin-left: 0;
    justify-content: space-around;
  }
 .task-summary {
    width: 100%;
  }
 .task-chart {
    width: 100%;
    padding-right: 0;
  }
 .chart-box {
    height: 200px;
  }
 .title {
    font-size: 1.5em;
  }
 .task-card div,
 .task-card span {
    font-size: 16px;
  }
}


</style>